import React, { PureComponent } from 'react';
import { connect } from 'dva';

import { Row, Col, Icon, Form, Button, Avatar, InputNumber, Popconfirm, Modal, AutoComplete, Input, Divider } from 'antd';

import styles from './styles.less';

const FormItem = Form.Item;

const ModelName = "box";
@connect(({ loading }) => ({
  loading: loading.models[ModelName],
}))
@Form.create()
class Comp extends PureComponent {

  constructor(props) {
    super(props);

    const { getInstance } = props;
    if (typeof getInstance === 'function') {
      getInstance(this);
    }
  }

  remove = (k) => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    // We need at least one passenger
    if (keys.length === 1) {
      return;
    }

    form.setFieldsValue({
      keys: keys.filter(key => key !== k),
    });
  }

  addItem = () => {
    const { form } = this.props;
    const keys = form.getFieldValue('keys');
    const nextKeys = keys.concat(keys.length);

    form.setFieldsValue({
      keys: nextKeys,
    });
  }

  componentDidMount() {

  }

  render() {
    const { form: { getFieldDecorator, getFieldValue }, mbl } = this.props;
    const { visible, onOk, onCancel } = this.props;

    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');

    const getModalContent = () => {
      const formLayout = {
        labelCol: {
          xs: { span: 0 },
          sm: { span: 0 },
          lg: { span: 0 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
          lg: { span: 24 },
        },
      };

      const colSpanLayout = {
        xs: 4,
        md: 4,
        lg: 4,
      };

      const formItems = () => {
        return keys.map((index) => {
          return <Row gutter={21} key={index} className={styles.dataRow}>
            <Col span={5} >
              <FormItem {...formLayout}>
                {getFieldDecorator(`objectNumber_${index}`, {
                  rules: [{ required: true, message: '请输入货柜号' }],
                  initialValue: '',
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem {...formLayout} >
                {getFieldDecorator(`sealNumber_${index}`, {
                  rules: [{ required: true, message: '请输入封条号' }],
                  initialValue: '',
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={4} >
              <FormItem {...formLayout} hasFeedback={false} >
                {getFieldDecorator(`qty_${index}`, {
                  rules: [{ required: true }],
                  initialValue: '',
                })(<InputNumber style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={4} >
              <FormItem {...formLayout} hasFeedback={false} >
                {getFieldDecorator(`weight_${index}`, {
                  rules: [{ required: true }],
                  initialValue: '',
                })(<InputNumber style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={5} >
              <div style={{ display: 'flex' }} >
                <FormItem {...formLayout}>
                  {getFieldDecorator(`measure_${index}`, {
                    rules: [{ required: true }],
                    initialValue: '',
                  })(<InputNumber style={{ width: '90%' }} />)}
                </FormItem>
                <Icon
                  className={styles.dynamic_delete_button}
                  type="minus-circle-o"
                  disabled={keys.length === 1}
                  onClick={() => this.remove(index)}
                />
              </div>
            </Col>
          </Row>;
        });
      }

      return (
        <div>
          <Row>
            <Col span={5}>货柜号</Col>
            <Col span={5}>封条号</Col>
            <Col span={4}>数量({mbl.qtyPOM})</Col>
            <Col span={4}>重量({mbl.weightPOM})</Col>
            <Col span={5}>体积({mbl.measurePOM})</Col>
          </Row>
          <Form onSubmit={this.handleSubmit}>
            {formItems()}
          </Form >

          <Button
            type="dashed"
            icon="plus"
            style={{ marginTop: '16px' }}
            onClick={e => {
              e.preventDefault();
              this.addItem();
            }}
          >添加</Button>
        </div>
      );
    };

    return (
      <Modal
        title={'编辑'}
        destroyOnClose
        width={1150}
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
      >{getModalContent()}
      </Modal>
    );
  }
}

export default Comp;

